import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import './curve.css';

export default function Curve() {
  useEffect(() => {
    const chartDom = document.getElementById('curveChart');
    const myChart = echarts.init(chartDom);
    
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#3ed4a7',
            type: 'dashed'
          }
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name: '新增用户数量',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          data: [3400, 2900, 3100, 1520, 3200, 3000, 3500],
          itemStyle: {
            color: '#3ed4a7'
          },
          lineStyle: {
            color: '#3ed4a7',
            width: 3
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(62, 212, 167, 0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(62, 212, 167, 0.1)'
                }
              ]
            }
          },
          markLine: {
            silent: true,
            data: [
              {
                xAxis: '03-04',
                lineStyle: {
                  color: '#3ed4a7',
                  type: 'dashed'
                },
                label: {
                  formatter: '1520',
                  position: 'middle',
                  color: '#3ed4a7'
                }
              }
            ]
          }
        }
      ]
    };

    option && myChart.setOption(option);

    // 清理函数
    return () => {
      myChart.dispose();
    };
  }, []);

  return <div id="curveChart" className="curve-chart"></div>;
}
